<template>
	<view>
		<swiper  :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"  circular :previous-margin="index" :next-margin="index" class="img">
			 <swiper-item  v-for="(itme,index) in img" :key="index">
				<image :src="itme" style="border-radius: 30rpx;width: 695rpx;height: 314rpx;vertical-align: middle;" @tap.stop="yuelan"></image>
			 </swiper-item>
		</swiper>
		<view style="background: #FFFFFF;width: 750rpx;letter-spacing: 1rpx;box-sizing: border-box;padding:33.21rpx 35.64rpx;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="font-size: 32.616rpx;color:#373737 ;font-weight: bold;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{mechanism_name}}</view>
				<view style="font-size: 24.15rpx;color: #474747;">距离{{juli}}km</view>
			</view>
			<view style="margin: 20rpx 0;">
			<!-- 	<uniRate :size="18" :value="2.2" activeColor="#FF942B"></uniRate> -->
			</view>
			<view style="font-size: 24.15rpx;color: #343434;display: flex;align-items: center;justify-content: space-between;min-height: 50rpx;" @tap="getLocation">
				<view style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{mechanism_addr}}</view>
				<view>
					<image :src="biao_" mode="" style="width: 25.368rpx;height: 31.4rpx;" class="suofang"></image>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 15rpx;" @tap="phoneCall">
				<view style="display: flex;align-items: center;">
					<view >
						<view v-for="(itme,index) in phone" :key="index" style="font-size: 24.15rpx;color: #343434;margin-bottom: 3rpx;">{{itme}}</view>
					</view>
					<image :src="dianhua" style="width: 30rpx;height: 30rpx;margin-left: 39rpx;"  class="suofang"></image>
				</view>
			</view>
		</view>
		<view style="width: 750rpx;margin:40rpx 0;padding: 30rpx 35.64rpx 30rpx 38.64rpx;box-sizing: border-box;background: #FFFFFF;border-bottom: 1rpx solid #BEBEBE;border-top: 1rpx solid #BEBEBE;">
			<view style="font-size: 32.616rpx;letter-spacing: 1rpx;font-weight: bold;color: #373737;margin-bottom: 33.26rpx;">机构介绍</view>
			<view style="background: #F5F5F5;padding: 15rpx;border-radius: 18rpx;">
				<view style="font-size:28rpx ;letter-spacing: 2rpx;letter-spacing: 2rpx;color: 	#696969;" >
					{{introduction_content}}
				</view>
			</view>
		</view>
		<view style="margin: 7.24rpx 0;background: #FFFFFF;padding:30rpx 40rpx 40rpx 35rpx ;" v-if="teacher_img.length != 0">
			<view style="font-size:35.58rpx ;font-weight: bold;color: #373737;margin-bottom: 50rpx;">授课老师</view>
			<view style="overflow-y: hidden;overflow-x: scroll;">
				<view style="display: flex;">
					<view v-for="(itme,index) in teacher_img" :key="index" style="display: flex;flex-direction: column;align-items: center;margin-left: 20rpx;">
						<view>
							<image :src="itme.photo" style="width: 130rpx;height: 130rpx;border-radius: 50%;border: 0.5rpx solid #F5F5F5;" @tap="teacher_photo(itme.id)"></image>
						</view>
						<view style="margin-top: 10rpx;font-size: 30rpx;color: #FF7300;">{{itme.full_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 670rpx;background: #FFFFFF;padding: 30rpx 35.64rpx 0 38.64rpx;">
			<view>
				<view style="font-size: 32.616rpx;letter-spacing: 1rpx;font-weight: bold;color: #373737;">全部课程({{ke_num}})</view>
				<view style="height: 2rpx;width: 100%;background: #E0E0E0;margin: 30rpx 0;"></view>
				<view style="width: 650rpx;box-sizing: border-box;" scroll-y="true" :class="kecheng_.length == 0 ? 'wu_shuju' : 'is_shuju' ">
					<view v-for="(itme,index) in kecheng_" :key="index" @tap="gokechengxiang(itme)">
						<view style="display: flex;" class="box_wai">
							<view class="img">
								<image :src="itme.face_url" class="img"></image>
								<view class="categories_child">{{itme.categories}}</view>
								<view class="vertical" v-if="itme.is_attend_activities">
									<image :src="quan_" mode="widthFix" style="width: 170rpx;vertical-align: bottom;"></image>
								</view>
							</view>
							<view style="margin-left: 20rpx;">
								<view style="font-size: 32rpx;font-weight: bold;overflow: hidden;text-overflow:ellipsis;whitewhite-space: nowrap;width: 500rpx;">{{itme.itt}}</view>
								<view style="display: flex;justify-content: space-between;align-items: center;height: 37rpx;margin:20rpx 0;">
									<view style="display: flex;align-items: center;position: relative;">
										<view style="color: #FF3D3D;font-weight:bold ;">
											<text style="font-size:20rpx;">￥</text>
											<text style="font-size:33rpx;margin: 0 5rpx;">{{itme.original_price == 0 ? itme.default_discount_price : itme.original_price }}</text>
											<text style="font-size:20rpx;" >{{itme.original_price == 0 ? '' : '/ 节' }}</text>
										</view>
									</view>
								</view>
								<view style="display: flex;justify-content: space-between;width: 400rpx;align-items: center;">
									<view style="display: flex;">
										<view v-if="itme.danjie_shifou != ''">
											<image :src="danjie_img" class="img_huo"></image>
										</view>
										<view style="margin-left: 10rpx;" v-if="itme.pingtuan_shifou != ''">
											<image :src="pingtuan_img" class="img_huo"></image>
										</view>
										<view v-if="itme.xianshi_shifou != ''" style="margin-left: 10rpx;">
											<image :src="xianshi_img" class="img_huo"></image>
										</view>
									</view>
									<view style="font-size: 25rpx;color: #AEAEAE;">已售{{itme.pay_num}}</view>
								</view>
							</view>
						</view>
						<view style="height: 2rpx;width: 680rpx;background: #F5F5F5;margin: 30rpx 0;"></view>
					</view>
				</view>
				<view style="width: 100%;text-align: center;font-size: 28rpx;color: #C7C7C7;margin-top: 30rpx;padding-bottom: 30rpx;" @tap="gengduoke(itme)" v-if="ke_num != 0">查看更多数据
					<image :src="zhijian" mode="" style="width: 16.08rpx;height: 20.52rpx;margin-left: 12.67rpx;vertical-align: middle;"></image>
				</view>
			</view>
		</view>
		<view style="background: #FFFFFF;margin-top: 40rpx;overflow: hidden;padding-top: 30rpx;">
			<view style="font-size: 33rpx;font-weight: bold;color: #373737;margin-left: 35rpx;">
				<text>学生评价</text>
				<text>({{nun}})</text>
			</view>
			<view style="width: 750rpx;height: 500rpx;position: relative;">
				<view style="position: absolute;top: 70rpx;left: 35rpx;">
					<view style="width: 165rpx;height: 90rpx;line-height: 90rpx;text-align: center;font-size: 63rpx;font-weight: bold;color: #FF7300;border: 1.2rpx solid #FF7300;border-radius: 12rpx;position: relative;top: -40rpx;">
						{{num_average_score}}
					</view>
					<view class="ping" style="margin: 0;">
						<text>喜爱程度</text>
						<text style="color: #FF7300;">{{num_attitude}}</text>
					</view>
					<view class="ping">
						<text>课程质量</text>
						<text style="color: #FF7300;">{{num_course_quality}}</text>
					</view>
					<view class="ping">
						<text>环境设施</text>
						<text style="color: #FF7300;">{{num_environment}}</text>
					</view>
					<view class="ping">
						<text>师资力量</text>
						<text style="color: #FF7300;">{{num_faculty}}</text>
					</view>
					<view class="ping">
						<text>性价比</text>
						<text style="color: #FF7300;">{{num_cost_effectiveness}}</text>
					</view>
				</view>
				<view style="width: 750rpx;height: 500rpx;">
					<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
				</view>
			</view>
		</view>
		<view style="margin-top: 7rpx;width: 750rpx;padding: 30rpx 36.24rpx;background: #FFFFFF;" v-if="ping_lun.length != 0">
			<view v-for="(itme,index) in ping_lun" :key="index" style="box-sizing: border-box;padding: 20rpx 0;">
				<view style="display: flex;width: 100%;align-items: center;">
					<view>
						<image :src="itme.map.userinfo.avatar" style="width: 74.3rpx;height: 74.3rpx;border-radius: 50%;"></image>
					</view>
					<view style="margin-left: 20rpx;">
						<view></view>
						<view style="font-size: 25rpx;color: #C5C5C5;letter-spacing: 2rpx;">{{itme.create_time}}</view>
					</view>
				</view>
				<view style="font-size: 27rpx;letter-spacing: 2rpx;margin: 30rpx 0;">
					{{itme.content}}
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view v-for="(itmes,indexs) in itme.photo_url_arr" :key="indexs" style="margin: 32rpx 32rpx 0 0;">
						<image :src="itmes" style="width: 201rpx;height: 201rpx;border-radius: 18rpx;vertical-align: middle;" v-if="itmes != ''"></image>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 7rpx;width: 750rpx;padding: 20rpx 0;background: #FFFFFF;font-size: 30rpx;font-weight: bold;text-align: center;color:#999999;" v-if="is_show">
			暂无数据
		</view>
	</view>
</template>

<script>
	import amap from '../../../common/amap-wx.js';
	import uCharts from '../../../js_sdk/u-charts/u-charts/u-charts.js';
	var canvasRadar = null;
	var _self;
	export default {
		onShareAppMessage(res) {
		    if (res.from === 'menu') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '课程详情',
		      path: '/pages/Meet/jigouxiangqing/jigouxiangqing?id=' +  this.mechanism_id
		    }
		  },
		data(){
			return {
				canvasRadar:null,
				img:[],
				mechanism_name:"",
				juli:"",
				adder:"",
				phone: [],
				id:"",
				num:1,
				kecheng_:[],
				ke_num:"",
				interval:3000,
				indicatorDots: true,
				autoplay: true,
				duration: 1000,
				index:"20rpx",
				amapPlugin: null,  
				key: 'f548b1f36891b5b5b3d0befff4889b7f',  
				addressName: '',  
				weather: {  
					hasData: false,  
					data: []  
				},
				longitude: "",
				latitude: "",
				chartData: {
					categories: ['喜爱程度', '课程质量', '环境设施', '师资力量', '性价比'],
					series: [{
						name: '综合评分',
						data: [],
						color:"#FF7300"
					}]
				},
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				nun: "",
				num_attitude: "",
				num_course_quality: "",
				num_environment: "",
				num_faculty: "",
				num_cost_effectiveness: "",
				num_average_score: "",
				ping_lun: [],
				num_str: 1,
				res_: 1,
				is_show: false,
				introduction_content: "",
				imgg:"../../../static/newshouye/biao.png",
				teacher_img: [],
				dianhua: "http://img.curiousmore.com/512193",
				biao_: "http://img.curiousmore.com/401339",
				zhijian: "http://img.curiousmore.com/578648",
				danjie_img: "http://img.curiousmore.com/450973",
				pingtuan_img: "http://img.curiousmore.com/172161",
				xianshi_img: "http://img.curiousmore.com/307599",
				mechanism_addr: "",
				mechanism_id: "",
				mechanismLongitude: "",
				mechanismLatitude: ""
			}
		},
		
		methods:{
			
				teacher_photo(itme) {
					uni.navigateTo({
						url: "/pages/Meet/sijiaoList/sijiaoList?teacherId=" + itme
					})
				},
				
		async	jigou_teacher(id){
				const res = await this.$myRequest({
					url: "/masterInfo/queryListPage",
					data: {
						mechanism_id: id,
						type: "teach_paypal",
						pageSize: 10,
						currentPage: 1,
						status: 2
					}
				})
				if(res.code == 0){
					this.teacher_img = res.data
				}
			},
			phoneCall(){
				let me = this
				uni.showModal({
				    content: '是否咨询机构',
					cancelColor: "#FF7300",
					confirmColor: "#FF7300",
				    success: function (res) {
				        if (res.confirm) {
				            uni.makePhoneCall({
								phoneNumber: me.phone[0],
								fail: () => {
									uni.showToast({
										title: "您已取消"
									})
								}
				            })
				        } else if (res.cancel) {
				            
				        }
				    }
				});
				
			},
			gengduoke(itme){
				uni.navigateTo({
					url: "/pages/Friend/groupTalk/groupTalk?id=" + this.mechanism_id
				})
			},
			yuelan(){
				uni.previewImage({
					urls: this.img,
					indicator: "number"
				})
			},
			showRadar(canvasId,chartData){
				canvasRadar=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'radar',
					fontSize:11,
					legend:{show:true},
					background:'#FFFFFF',
					pixelRatio:this.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					width: this.cWidth*this.pixelRatio,
					height: this.cHeight*this.pixelRatio,
					extra: {
						radar: {
							max: 5//雷达数值的最大值
						}
					}
				});
			},
			
			getLocation(){
				let me = this
				uni.openLocation({//​使用微信内置地图查看位置。
				  latitude: Number(me.mechanismLatitude),//要去的纬度-地址
				  longitude: Number(me.mechanismLongitude),//要去的经度-地址
				  address: me.mechanism_addr
				})
			  },
			  
			 getRegeo() {
				let me = this
				me.amapPlugin.getRegeo({  
					success: (data) => {  
						me.addressName = data[0].name
					},
					fail:(err) => {
						console.log(err) 
					}
				});  
			},
			
		async	kecheng(id){
				const res = await this.$myRequest({
					url:"/masterSetPrice/queryCommodityList",
					method:"get",
					data:{
						status:2,
						mechanism_id: this.mechanism_id,
						type: "mechanism_offline",
						pageSize: 10,
						currentPage: this.num
					}
				})
				if(res.code == 0){
					this.ke_num = res.data.listCount
					res.data.list.forEach((itme) => {
						if(itme.label.length < 5){
							itme.num = itme.label.length*35 
						}else{
							itme.num = itme.label.length*30
						}
						itme.itt = "【" + itme.course_num + "节】" + itme.title
						itme.danjie_shifou = ""
						itme.xianshi_shifou = ""
						itme.pingtuan_shifou = ""
						if(itme.map.activityEntityList != null && itme.map.activityEntityList.length != 0){
							itme.map.activityEntityList.forEach((itmes) => {
								if(itmes.type == "single_payment"){
									itme.danjie_shifou = true
								}else if(itmes.type == "salesCourse"){
									itme.xianshi_shifou = true
								}else if(itmes.type == "grouping"){
									itme.pingtuan_shifou = true
								}
							})
						}
					})
					this.kecheng_ = res.data.list
				}
			},
			
			gokechengxiang(itme){
				uni.navigateTo({
					url: '/pages/World/classChannel/classChannel?curriculumId=' + itme.id
				})
			},
			 distance(la1, lo1, la2, lo2) {
			    var La1 = la1 * Math.PI / 180.0;
			    var La2 = la2 * Math.PI / 180.0;
			    var La3 = La1 - La2;
			    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
			    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
			    s = s * 6378.137;//地球半径
			    s = Math.round(s * 10000) / 10000;
			    return s;
			},
			
		async	OrganizationDetails(id) {
				const res = await this.$myRequest({
					url: "/mastermechanism/queryMechanismListPage",
					data: {
						id: id,
						pageSize: 1,
						type: "teach_paypal"
					}
				})
				if(res.code == 0){
					let mechanismData = res.data[0]
					this.introduction_content = mechanismData.introduction_content
					this.juli = Math.round(this.distance(this.latitude,this.longitude,mechanismData.latitude,mechanismData.longitude))
					this.img = mechanismData.introduction_pic.split(",")
					this.mechanismLongitude = mechanismData.longitude
					this.mechanismLatitude = mechanismData.latitude
					this.mechanism_name = mechanismData.mechanism_name
					this.mechanism_addr = mechanismData.mechanism_addr
					if(mechanismData.contact_telephone.indexOf(",") !== 0){
						this.phone = mechanismData.contact_telephone.split(",")
					}else {
						this.phone.push(mechanismData.contact_telephone)
					}
				}
			},
			
		async	jigou_xiang(id){
				let me = this
				const res = await me.$myRequest({
					url:"/masterComment/queryMechanismAverageScore",
					data:{
						mechanism_id: id,
					}
				})
				me.chartData.series[0].data[0] = res.data.attitude
				me.chartData.series[0].data[1] = res.data.course_quality
				me.chartData.series[0].data[2] = res.data.environment
				me.chartData.series[0].data[3] = res.data.faculty
				me.chartData.series[0].data[4] = res.data.cost_effectiveness
			},
		async	jigou_xiang_(id){
				let me = this
				const res = await me.$myRequest({
					url:"/masterComment/queryMechanismAverageScore",
					data:{
						mechanism_id: id,
					}
				})
				me.num_cost_effectiveness = res.data.cost_effectiveness
				me.nun = res.data.commentCount
				me.num_attitude = res.data.attitude
				me.num_course_quality = res.data.course_quality
				me.num_environment = res.data.environment
				me.num_faculty = res.data.faculty
				me.num_average_score = res.data.average_score
			},
		async	jigou_ping(){
				const res = await this.$myRequest({
					url:"/masterComment/queryMechanismList",
					data:{
						mechanism_id: this.mechanism_id,
						type: "teach_paypal_course",
						pageSize: 5,
						currentPage: this.num_str
					}
				})
				if(res.data.length == 0){
					this.is_show = true
				}
				if(res.data.length < 5){
					this.res_ = 2
				}
				let list = []
				res.data.forEach((itme) => {
					if(itme.photo_url.indexOf(",") > -1){
						itme.photo_url_arr = itme.photo_url.split(",")
					}else{
						list.push(itme.photo_url)
						itme.photo_url_arr = list
					}
				})
				if(this.ping_lun.length == 0){
					this.ping_lun = res.data
				}else{
					this.ping_lun = this.ping_lun.concat(res.data)
				}
			}
		},
		
		onLoad(option) {
			_self = this
			this.amapPlugin = new amap.AMapWX({  
				key: this.key  
			}); 
			try {
				this.longitude = uni.getStorageSync("storage_key").longitude
				this.latitude = uni.getStorageSync("storage_key").latitude
			}catch(e){}
			let list = option.id
			this.mechanism_id = list
			this.OrganizationDetails(list)
			this.jigou_xiang_(list)
			this.kecheng(list)
			this.getRegeo()
			this.jigou_xiang(list)
			this.cWidth=uni.upx2px(930)
			this.cHeight=uni.upx2px(500)
			_self.showRadar("canvasRadar",this.chartData)
			this.jigou_ping()
			this.jigou_teacher(list)
		},
		onReachBottom(){
			if(this.ke_num > 10){
				this.num++
				this.kecheng()
			}
			if(this.res_ == 1){
				this.num_str++
				this.jigou_ping()
			}
		},
		onShow() {
			
		}
	}
</script>
<style lang="scss" scoped>
	swiper{
		padding:10rpx 0;
		height:320rpx;
		swiper-item{
			text-align: center;
		}
	}
	.suofang{
		position:relative;
		animation:mymove  1s linear infinite;
		-webkit-animation:mymove 0.2s ease 1 infinite; /*Safari and Chrome*/
	}
	@keyframes mymove{
		0%{
		transform: scale(1);  /*开始为原始大小*/
		}
		50%{
			transform: scale(1.5);
		}
		100%{
			transform: scale(1);
		}
	}
	.ping{
		width: 165rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.label{
		height: 40rpx;
		line-height: 40rpx;
		width: 150rpx;
		border-radius: 25rpx;
		background: #FFFFFF;
		border: 0.5rpx solid #EE7B30;
		font-size: 25rpx;
		color: #EE7B30;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.tupian{
		position: relative;
		.neibu_ke{
				position: absolute;
				width: 694rpx;
				left: 27rpx;
				height: 761rpx;
				box-sizing: border-box;
				padding: 27rpx;
				background: #FFFBED;
				top: 1400rpx;
				border-radius: 30rpx;
				.biao_title{
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}
		
		.img{
			width: 750rpx;
			vertical-align: top;
		}
		.zhongjian_kuang{
			position: absolute;
			left: 33rpx;
			top: 475rpx;
			width: 685rpx;
			height: 587rpx;
			box-sizing: border-box;
			border: 10rpx solid #000000;
			border-radius: 25rpx;
			background: #FFFBED;
			padding: 35rpx;
			font-size: 30rpx;
			letter-spacing: 2rpx;
			.erwei{
				position: absolute;
				width: 170rpx;
				height: 170rpx;
				top: 310rpx;
				left: 231rpx;
			}
		}
	}
	.box_wai{
		display: flex;
		.img_huo{
			height: 40rpx;
			width: 130rpx;
		}
		.img{
			width: 170rpx;
			height: 170rpx;
			border-radius: 20rpx;
			position: relative;
			.categories_child{
				min-width: 50rpx;
				height: 38rpx;
				line-height: 38rpx;
				padding: 0 15rpx;
				font-size: 22rpx;
				background: #FF3D3D;
				text-align: center;
				border-radius: 20rpx 0 20rpx 0;
				position: absolute;
				top: 0;
				left: 0;
				color: #FFFFFF;
			}
			.vertical{
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}
	.is_shuju {
		min-height: 100rpx;
	}
	.wu_shuju {
		min-height: 0rpx;
	}
</style>